<template>
	<div>
		<el-input  v-model="keyWords" size="mini" prefix-icon="el-icon-search" placeholder="按Enter搜索学生名..." @clear="initUsersList"
		 clearable @keydown.enter.native="initUsersList" style="width: 300px; margin-right: 10px;"></el-input>
		<el-button size="mini" type="primary" @click="initUsersList" >搜索</el-button>
		 <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
		<el-table
		 v-loading="loading"
		    element-loading-text="拼命加载中"
		    element-loading-spinner="el-icon-loading"
		    element-loading-background="rgba(0, 0, 0, 0.8)"
		    :data="usersList"
		    stripe
		    style="width: 100%">
		    <el-table-column
		      prop="username"
		      label="用户名"
		      width="180">
		    </el-table-column>
			
		    <el-table-column
		      prop="isenable"
		      label="是否可用"
		      width="150">
		    </el-table-column>
			<el-table-column
			  prop="phone"
			  label="电话">
			</el-table-column>
			<el-table-column
			  prop="email"
			  label="所属院校">
			</el-table-column>
		    <el-table-column
		      prop="address"
		      label="地址">
		    </el-table-column>
			<el-table-column
			  prop="createTime"
			  label="注册时间">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="250">
						
				<template slot-scope="scope">
					<!-- <el-button type="primary" style="padding: 3px; margin: 0 10px;" @click="moreInfomation(scope.$index, scope.row)">更多</el-button> -->
					<template v-if="scope.row.isenable">
							<el-button slot="reference" type="danger" style="padding: 3px; margin-left: 10px;" @click="updateEnable(scope.row.id)">禁用</el-button>
					</template>
					<template v-if="!scope.row.isenable">
							<el-button slot="reference" type="success" style="padding: 3px; margin-left: 10px;" @click="updateEnable(scope.row.id)">解除禁用</el-button>
					</template>
						
				</template>
						
			</el-table-column>
		  </el-table>
		  <div style="display: flex; justify-content:center; margin-top: 0.625rem;">
		  	<el-pagination background @current-change="currentChange" @size-change="sizeChange" layout="sizes, prev, pager, next, jumper, ->, total, slot "
		  	 :total="total">
		  	</el-pagination>
		  </div>
		  
	</div>
</template>

<script>
	export default{
		name:"Student",
		data() {
			return {
				usersList: [],
				total: 0,
				page: 1,
				size: 10,
				keyWords:"",
				loading:false,
			}
		},
		mounted() {
			this.initUsersList();
		},
		methods: {
			sizeChange(currentSize) {
				this.size = currentSize;
				this.initUsersList();
			},
			currentChange(currentPage) {
				this.page = currentPage;
				this.initUsersList();
			},
			updateEnable(id) {
				this.putRequest("/users/update/?id=" + id).then(res => {
					if (res) {
						this.initUsersList();
					}
				})
			},
			initUsersList() {
				this.loading = true;
				this.getRequest("/users/?page="+this.page+"&size="+this.size+"&keyWords="+this.keyWords).then(res=>{
					this.loading = false;
					if(res){
						this.usersList = res.data;
						this.total = res.total;
					}
				})
			}
		},
	}
</script>

<style>
</style>
